<div class="layui-card layadmin-header">
  <div class="layui-breadcrumb" lay-filter="breadcrumb">
    <a lay-href="">主页</a>
    <a><cite>码商二维码列表</cite></a>
  </div>
</div>
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-tab layui-tab-brief">
      <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
          <div class="layui-row">
            <div class="layui-form" style="float:right; margin-bottom: 10px;">
              <div class="layui-form-item" style="margin:0;">
                <div class="layui-input-inline">
                  <input type="text" name="collStartTime" id="collStartTime" autocomplete="off" placeholder="开始收款时间" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="collEndTime" id="collEndTime" autocomplete="off" placeholder="结束收款时间" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="username" id="username" placeholder="二维码标识" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="collName" id="collName" placeholder="收款人姓名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="collThirdName" id="collThirdName" placeholder="实名认证姓名" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-input-inline">
                  <input type="text" name="collThirdAccount" id="collThirdAccount" placeholder="三方账号" autocomplete="off" class="layui-input">
                </div>
<!--                <div class="layui-input-inline">-->
<!--                  <input type="text" name="minAmount" id="minAmount" placeholder="最小金额" autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--                <div class="layui-input-inline">-->
<!--                  <input type="text" name="mchOrderNo" id="maxAmount" placeholder="最大金额" autocomplete="off" class="layui-input">-->
<!--                </div>-->
                <div class="layui-input-inline">
                  <select name="codeBusId" id="codeBusId" lay-filter="codeBusId" lay-search="">
                    <option value="">选择所属码商</option>
                  </select>
                </div>
                <div class="layui-input-inline">
                  <select name="codeType" id="codeType" lay-search="">
                    <option value="">二码维类型</option>
                    <option value="1">支付宝</option>
                    <option value="2">微信</option>
                    <option value="3">聚合码</option>
                  </select>
                </div>
                <div class="layui-input-inline">
                  <select name="status" id="status" lay-search="" placeholder="选择二维码状态">
                    <option value="">状态</option>
                    <option value="1" selected>使用中</option>
                    <option value="0">已停用</option>
                    <option value="-1">等待审核</option>
                    <option value="-2">审核不通过</option>
                  </select>
                </div>
                <div class="layui-input-inline" style="width: 250px;">
                  <button id="search" class="layui-btn" data-type="reload">搜索</button>
<!--                  <a class="layui-btn layui-btn-normal" lay-href="/code/qr/add">添加</a>-->
                </div>
              </div>
            </div>
          </div>
          <table id="Code_QRCode_dataAll" lay-filter="Code_QRCode_dataAll"></table>
        </div>
      </div>
    </div>
  </div>
</div>
<style>
  .imgDiv {
    width: 500px;
    height: 500px;
    vertical-align: middle;
    display: table-cell;
    text-align: center;
  }
</style>
<script type="text/html" id="operateBar">
  <a class="layui-btn layui-btn-xs layui-btn-primary" title="点击查看二维码" lay-event="viewQr"><i class="layui-icon">&#xe64a;</i></a>
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">详情</a>
  <!--  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
  {{#  if(d.status == 0){ }}
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="enable">上码</a>
  {{#  } else if(d.status == 1){ }}
  <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="disable">下码</a>
  {{#  } }}
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<script>
layui.use(['admin', 'table', 'util', 'laydate'], function(){
  var $ = layui.$
  ,admin = layui.admin
  ,table = layui.table
  ,element = layui.element
  ,laydate = layui.laydate
  ,form = layui.form;

  element.render('breadcrumb', 'breadcrumb');

  var tplStatus = function (d) {
    if (d.status == -1) {
      return "<span style='color: blueviolet'>等待审核</span>";
    } else if (d.status == -2) {
      return "<span style='color: yellowgreen'>审核不通过</span>";
    } else if (d.status == 0) {
      return "<span style='color: darkred'>已停用</span>";
    } else if (d.status == 1) {
      return "<span style='color: blue'>使用中</span>";
    }
  };

  var tplWeight = function (d) {
    if (d.weight <= 0) {
      return "<span style='color: darkred'>" + d.weight + "</span>";
    } else if (d.weight <= 3) {
      return "<span style='color: yellowgreen'>" + d.weight + "</span>";
    } else if (d.weight <= 5) {
      return "<span style='color: blueviolet'>" + d.weight + "</span>";
    } else if (d.weight > 5) {
      return "<span style='color: blue'>" + d.weight + "</span>";
    }
  };

  var tplCodeType = function (d) {
    if (d.codeType == 1) {
      return "支付宝";
    } else if (d.codeType == 2) {
      return "微信";
    }
  };

  admin.req({
    type: 'get',
    url: layui.setter.baseUrl + '/code/user/getUserByType?type=3',
    success: function (res) {
      if (res.code == 0) {
        var options;
        for (i in res.data) {
          var e = res.data[i];
          options += '<option value="' + e.id + '">' + e.realName + ' (' + e.username + ')</option>'
        }
        $("#codeBusId").append(options);
        form.render();
      }
    }
  });

  //用户列表
  table.render({
    elem: '#Code_QRCode_dataAll'
    ,url: layui.setter.baseUrl + '/code/qr/list' //用户列表接口
    ,where: {
        status: 1,
        access_token: layui.data(layui.setter.tableName).access_token
    }
    ,id: 'tableReload'
    ,page: true
    ,cols: [[
      {field: 'username', title: '收款人'}
      ,{field: 'collName', title: '标识'}
      // ,{field: 'codeType', title: '类型', templet: tplCodeType}
      ,{field: 'collThirdAccount', title: '三方账号'}
      ,{field: 'collThirdName', title: '实名姓名'}
      ,{field: 'status', title: '状态', templet: tplStatus}
      ,{field: 'weight', title: '权重', templet: tplWeight}
      ,{field: 'sucNum', title: '成功'}
      ,{field: 'failNum', title: '失败'}
      // ,{field: 'minAmount', title: '最小金额'}
      // ,{field: 'maxAmount', title: '最大金额'}
      ,{field: 'totalCollAmount', title: '总收金额', templet: '<div>{{ d.totalCollAmount }}</div>'}
      // ,{field: 'totalCollNum', title: '总收次数'}
      // ,{field: 'rate', title: '费率', templet: '<div>{{ (d.rate*100).toFixed(2) }}%</div>'}
      ,{field: 'lastOrderTime', title: '订单时间', templet: '<div>{{ layui.util.toDateString(d.lastOrderTime, "MM-dd HH:mm:ss") }}</div>'}
      ,{field: 'edit', title: '操作', width: 205, toolbar: '#operateBar' }
    ]]
    ,skin: 'line'
  });

  //监听工具条
  table.on('tool(Code_QRCode_dataAll)', function (obj) {
    var data = obj.data;
    if (obj.event === 'detail') {
      location.hash = "/code/qr/detail/id=" + data.id;
    } else if (obj.event === 'edit') {
      location.hash = "/code/qr/edit/id=" + data.id;
    } else if (obj.event === 'disable') {
      layer.confirm('停用后就不能正确收款了,确认停用吗?', function (index) {
        admin.req({
          type: 'get',
          url: layui.setter.baseUrl + '/code/qr/disable',
          data: {
            id: data.id,
          },
          success: function(res){
            if(res.code == 0) {
              layer.msg('停用成功', {
                icon: 1
              });
              table.reload("tableReload");
            }
          }
        });
      });
    } else if (obj.event === 'enable') {
      layer.confirm('确认启用此二维码收款了吗?', function (index) {
        admin.req({
          type: 'get',
          url: layui.setter.baseUrl + '/code/qr/enable',
          data: {
            id: data.id,
          },
          success: function(res){
            if(res.code == 0) {
              layer.msg('启用成功', {
                icon: 1
              });
              table.reload("tableReload");
            }
          }
        });
      });
    } else if (obj.event === 'del') {
      layer.confirm('确认删除么', function (index) {
        admin.req({
          type: 'get',
          url: layui.setter.baseUrl + '/code/qr/del',
          data: {
            id: data.id,
          },
          success: function(res){
            if(res.code == 0) {
              layer.msg('删除成功', {
                icon: 1
              });
              table.reload("tableReload");
            }
          }
        });
      });
    } else if (obj.event === 'viewQr') {
      var codeUrl = "";
      admin.req({
        type: 'get',
        url: layui.setter.baseUrl + '/code/qr/view',
        data: {
          id: data.id,
        },
        success: function (res) {
          if (res.code == 0) {
            codeUrl = res.data;
            layer.open({
              type: 1,
              title: '查看二维码',
              area: ['500px', '550px'],
              shadeClose: true,
              content: '<div class="imgDiv"><img style="width:80%;height:80%;" src="' + codeUrl + '"></div>'
            });
          }
        }
      });
    }
  });

  // 搜索
  var $ = layui.$, active = {
    reload: function(){
      var codeBusId = $('#codeBusId').val();
      var username = $('#username').val();
      var collName = $('#collName').val();
      var collThirdName = $('#collThirdName').val();
      var collThirdAccount = $('#collThirdAccount').val();
      var codeType = $('#codeType').val();
      var status = $('#status').val();
      var collStartTime = $('#collStartTime').val();
      var collEndTime = $('#collEndTime').val();
      //执行重载
      table.reload('tableReload', {
        page: {
          curr: 1 //重新从第 1 页开始
        }
        ,where: {
          codeBusId: codeBusId,
          username: username,
          collName: collName,
          collThirdName: collThirdName,
          collThirdAccount: collThirdAccount,
          codeType: codeType,
          status : status,
          collStartTime : collStartTime,
          collEndTime : collEndTime
        }
      });
    }
  };
  $('#search').on('click', function() {
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
  });

  laydate.render({
    elem: '#collStartTime'
    ,type: 'time'
    ,format: 'HH:mm:ss'
  });

  laydate.render({
    elem: '#collEndTime'
    ,type: 'time'
    ,format: 'HH:mm:ss'
  });
  // 渲染表单
  form.render();
});
</script>